<template>
  <div id="app">
    <div class="heand">
      <div class="price">
        <img src="../assets/images/fuck.png" />
      </div>
      <div class="hd-text"  @click="fun()"> 请登录</div>
      <div class="hd-r">
        <img src="../assets/images/4.png" />
      </div>
    </div>
    <div class="item_2">
      <div>我的订单</div>
      <span>></span>
    </div>
    <div class="message">
      <ul>
        <li>
          <span><img src="../assets/images/1.png" /></span>
          <p>待付款</p>
        </li>
        <li>
          <span><img src="../assets/images/2.png" /></span>
          <p>待收货</p>
        </li>
        <li>
          <span><img src="../assets/images/7.png" /></span>
          <p>评价</p>
        </li>
        <li>
          <span><img src="../assets/images/8.png" /></span>
          <p>退款/售后</p>
        </li>
      </ul>
    </div>
    <div class="box"></div>
    <van-cell is-link @click="showPopup">
      <img src="../assets/images/14.png" />
      <span> 我的权益</span>
    </van-cell>
    <van-popup v-model="show">本模块暂未开放</van-popup>
    <van-cell  is-link @click="showPopup">
      <img src="../assets/images/12.png" />
      <span> 优惠券</span>
    </van-cell>
    <van-popup   v-model="show">本模块暂未开放</van-popup>
    <van-cell is-link @click="showPopup">
      <img src="../assets/images/11.png" />
      <span> 我的收藏</span>
    </van-cell>
    <van-popup v-model="show">本模块暂未开放</van-popup>
    <div class="box1"></div>
    <van-cell is-link @click="showPopup">
      <img src="../assets/images/10.png" />
      <span> 地址管理</span>
    </van-cell>
    <van-popup v-model="show">本模块暂未开放</van-popup>
    <van-cell is-link @click="showPopup">
      <img src="../assets/images/5.png" />
      <span> 资质证照</span>
    </van-cell>
    <van-popup v-model="show">本模块暂未开放</van-popup>
    <van-cell is-link @click="showPopup">
      <img src="../assets/images/6.png" />
      <span> 协议规则</span>
    </van-cell>
    <van-popup v-model="show">本模块暂未开放</van-popup>
    <van-cell is-link @click="showPopup">
      <img src="../assets/images/13.png" />
      <span> 帮助与反馈</span>
    </van-cell>
    <van-popup v-model="show">本模块暂未开放</van-popup>
    <Bottom/>
  </div>
</template>

<script>
import Bottom from "@/components/bottom"
export default {
  name: "app",
  components:{
    Bottom
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    fun(){
      this.$router.push("/Zhuce")
    }
  },
};
</script>

<style scoped>
body {
  background-color: #f4f4f4;
}
#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.heand {
  width: 100%;
  height: 110px;
  background-image: url(../assets/images/9.png);
  position: relative;
}
.price img {
  width: 60px;
  height: 60px;
}
.price {
  position: absolute;
  left: 35px;
  bottom: 20px;
}
.hd-r img {
  width: 18px;
  height: 18px;
}
.hd-r {
  position: absolute;
  right: 40px;
  top: 48px;
}
.hd-text {
  position: absolute;
  left: 115px;
  top: 48px;
  font-size: 14px;
  color: #ffff;
}
.item_2 {
  height: 40px;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0px 18px 0px 20px;
  align-items: center;
}
.item_2 div {
  font-size: 14px;
  color: #797979;
}
.item_2 span {
  font-size: 18px;
  color: #dedede;
}
.introduce {
  height: 77px;
  background-color: #ffff;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
}
.introduce ul li {
  display: flex;
}
.introduce img {
  width: 40px;
  height: 40px;
}
.message img {
  width: 40px;
  height: 40px;
}
.message {
  height: 70px;
  background-color: #fff;
  margin-top: 2px;
  padding: 0px 30px;
}
.message ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.message ul li {
  text-align: center;
  margin-top: 2px;
}
.message ul li p {
  margin-top: -5px;
  font-size: 12px;
  color: #666666;
}
.box{
    margin-top: 6px;
}
.box1{
    margin-top: 6px;
}
.van-cell img {
  width: 38px;
  height: 38px;
  margin-top: -3px;
}
.df{
    margin-top: 3px;
}
.van-cell {
  margin-top: 2px;
  height: 50px;
}
.van-cell span {
  position: absolute;
  top: 4px;
}
.van-icon-arrow::before {
  margin-top: 2px;
}
</style>